<template>
  <div>
    <div class="header-history">
      <div class="fanhui" @click="$router.go(-1)">
        <span class="iconfont icon-jiantouzuo" @click="signOut"></span>
      </div>
      <div class="header-title">浏览历史</div>
      <div class="edit" @click="footFlag = !footFlag">
        {{ footFlag ? "编辑" : "完成" }}
      </div>
    </div>

    <div class="menu-history">
      <ul>
        <li v-for="(item,index) in historyList" :key="index">
          <input
            v-show="!footFlag"
            type="checkbox"
            ref="check"
            :checked="item.check"
            @click="check(item.id)"
          />
          <div class="img">
            <img :src="item.foodImg" alt="" />
          </div>
          <div class="details">
            <p>{{item.foodName}}</p>
            <p>人做过</p>
            <div class="details-user">
              <div class="pic">
                <img :src="item.touxiang" width="20" alt="" />
              </div>
              <span>{{item.userName}}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="footBox" v-show="!footFlag">
      <div class="footBox-text">已选择{{choiceNum}}道菜谱</div>
      <div class="foot-del">
        <button @click="del">删除</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      historyLists: null,
      footFlag: true,
      choiceNum: 0,
      choiceId: [],
      historyList:null
    };
  },
  methods: {
    signOut() {
      this.$emit("signOut");
    },
    check(id){
      let index=this.historyList.findIndex(item=>item.id==id);
      this.historyList[index].check=!this.historyList[index].check
      if(this.historyList[index].check){
        this.choiceNum++
      }else{
        this.choiceNum--
      }
    },
    del() {
      this.historyList=this.historyList.filter(item=>!item.check)
      window.localStorage.setItem("historyList",JSON.stringify( this.historyList))
        this.choiceNum=0
    },
  },
  created() {
    this.historyList = JSON.parse(window.localStorage.getItem("historyList"));
    console.log(this.historyList);
  },
};
</script>

<style lang="scss" scoped>
.header-history {
  background-color: white;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  position: sticky;
  top: 0;
  .fanhui {
    span {
      font-size: 16px;
    }
  }
}

.menu-history {
  padding: 0 20px;
  ul {
    li {
      display: flex;
      align-items: center;
      height: 126px;
      margin-bottom: 20px;
      input {
        margin-right: 10px;
      }
      .img {
        width: 157px;
        height: 126px;
        border-radius: 16px;
        overflow: hidden;
        img {
          height: 100%;
        }
      }
      .details {
        padding: 20px 0 16px 20px;
        p {
          &:nth-child(2) {
            font-size: 14px;
            margin: 10px 0 20px 0;
          }
        }
        .details-user {
          display: flex;
          align-items: center;
          .pic {
            height: 20px;
            width: 20px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 3px;
          }
          span {
            font-size: 12px;
            color: rgb(150, 150, 150);
          }
        }
      }
    }
  }
}
.footBox {
  height: 60px;
  padding: 0 20px;
  background-color: white;
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .foot-del {
    button {
      border: 0;
      background-color: white;
      outline: none;
    }
  }
}
</style>